ElementUI 销毁Dialog数据(简单粗暴) |
您所在的位置：网站首页 › el-dialog destroy-on-close › ElementUI 销毁Dialog数据(简单粗暴) |
|
在使用element开发通过之中使用Dialog弹窗创建数据或者数据回显在经常不过了。而且数据创建和数据编辑正常都是使用同一组件。 出现的问题： 使用dialog 提供的 属性 destroy-on-close 也并不能实现实时的dialog销毁，进行创建和编辑数据正常的切换，这时就可以使用强大的v-if进行dialog 直接销毁操作这个办法还是十分有效。代码如下： 拓展知识(dialog弹窗拖拽)： vue目录:src/utils/directives.js import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.ant-modal-header'); const dragDom = el.querySelector('.ant-modal'); dialogHeaderEl.style.cursor = 'move'; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = (() => { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr]; } else { return (dom, attr) => getComputedStyle(dom, false)[attr]; } })(); dialogHeaderEl.onmousedown = (e) => { // 鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body当前宽度 const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 const dragDomheight = dragDom.offsetHeight; // 对话框高度 const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 获取到的值带px 正则匹配替换 let styL = sty(dragDom, 'left'); let styT = sty(dragDom, 'top'); // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (styL.includes('%')) { styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); } else { styL = +styL.replace(/\px/g, ''); styT = +styT.replace(/\px/g, ''); }; document.onmousemove = function(e) { // 通过事件委托，计算移动的距离 let left = e.clientX - disX; let top = e.clientY - disY; // 边界处理 if (-(left) > minDragDomLeft) { left = -(minDragDomLeft); } else if (left > maxDragDomLeft) { left = maxDragDomLeft; } if (-(top) > minDragDomTop) { top = -(minDragDomTop); } else if (top > maxDragDomTop) { top = maxDragDomTop; } // 移动当前元素 dragDom.style.left = `${left + styL}px`; dragDom.style.top = `${top + styT}px`; // 将此时的位置传出去 // binding.value({x:e.pageX,y:e.pageY}) } document.onmouseup = function(e) { document.onmousemove = null; document.onmouseup = null; } } } }) // v-dialogDragWidth: 弹窗宽度拖大 拖小 Vue.directive('dialogDragWidth', { bind(el, binding, vnode, oldVnode) { const dragDom = binding.value.$el.querySelector('.el-dialog') el.onmousedown = (e) => { // 鼠标按下，计算当前元素距离可视区的距离 const disX = e.clientX - el.offsetLeft document.onmousemove = function(e) { e.preventDefault() // 移动时禁用默认事件 // 通过事件委托，计算移动的距离 const l = e.clientX - disX dragDom.style.width = `${l}px` } document.onmouseup = function(e) { document.onmousemove = null document.onmouseup = null } } } })在main.js中进入即可使用 import '@/utils/directives.js'使用案列： 注意事项： 在使用dialog弹窗拖拽并且也使用了 el-popover 时务必要使用v-if 进行每次销毁，否则会出现第二次弹窗拖拽不生效。 以上就是我对Dialog销毁的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |